<template>
	<view class="s-c-t-f">
		<view class="s-c-t-box">
			<view>{{saleCompTxt}}</view>
			<view class="c-d-t" @click="showDrop('show')">{{curDrop.name}}<text class="icon-font arrow-xiala-font" >&#xe618;</text></view>
		</view>
		<div class="echart-box" >
			<echarts :option="option" style="height:100%"></echarts>
		</div>
		<view class="good-mask mask-top" :style="!isExpand?'margin-left: 72px;width: calc(50% - 15px);':''"
			:class="state === 0 ? 'none' : state === 1 ? 'show' : ''" 
			@click="showDrop">
			<view class="cate-content">
				<scroll-view scroll-y class="cate-list c-l-p">
					<view v-for="(item,index) in dropDownList" :key="index">
						<view class="cate-item" 
							@click="change(item)">{{ item.name }} 
							<text class="icon-font selected-icon" v-show="item.id == curDrop.id">&#xe636;</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import lang from "../../../js/conf/Lang.js";
	import echarts from '@/components/echarts/echarts.vue';
	import { mapGetters } from "vuex";
	export default{
		computed: {
		    ...mapGetters(["isExpand"]),
		},
		components: {
			echarts
		},
		data()
		{
			return{
				state : 0,
				chartSourceData : {},
				saleCompTxt : lang.report.purchCompTxt,
				dropDownList:[
					{
						name:lang.purchaseCheckOut.saleTxt + lang.eTxt,
						id:1,
					},
					{
						name:lang.saleReport.oddNumberTxt,
						id:4,
					},
					{
						name:lang.saleReport.numberTxt,
						id:5,
					},
				],
				
				curDrop:{
					name:lang.purchaseCheckOut.saleTxt + lang.eTxt,
					id:1,
				},
				
				option: {
					title: {
						// text: 'ECharts 入门示例'
						// text: ''
					},
					tooltip: {},
					xAxis: {
						data: []
					},
					yAxis: {},
					series: [],
			    },
			}
		},
		methods:{
			init (data) 
			{
				this.chartSourceData = data;
				this.setData();
		　　},
		
			setData()
			{
				let len = this.chartSourceData.length;
				let series= [];
				let obj = {}
				obj.name  = this.curDrop.name;
				obj.type = 'bar';
				obj.data = [];
				obj.color = "#3388ff";
				series.push(obj);
				this.option.title.text = obj.name + "对比";
				let xAxis = {};
				xAxis.data = [];
				for(let i = 0; i<len; i++)
				{
					let temp = this.chartSourceData[i];
					if(this.curDrop.id == 1)
					{
						series[0].data.push(temp.amount_re);
						xAxis.data.push(temp.time);
					}
					if(this.curDrop.id == 2)
					{
						series[0].data.push(temp.amount_th_re);
						xAxis.data.push(temp.time);
					}
					if(this.curDrop.id == 3)
					{
						series[0].data.push(temp.profit_re);
						xAxis.data.push(temp.time);
					}
					if(this.curDrop.id == 4)
					{
						series[0].data.push(temp.num_od_re);
						xAxis.data.push(temp.time);
					}
					if(this.curDrop.id == 5)
					{
						series[0].data.push(temp.number_re);
						xAxis.data.push(temp.time);
					}
				}
				this.option.series = series;
				this.option.xAxis = xAxis;
			},
		
			showDrop(type)
			{	
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.state = 2;
				setTimeout(() => {
					this.state = state;
				}, timer);
			},
			
			change(item)
			{
				if(item.id == this.curDrop.id)return;
				this.curDrop = item;
				this.setData();
			},
		},
		mounted() {},
	}
</script>

<style lang="scss">
	.s-c-t-f
	{
		width: 50%;
		height: 100%;
		padding: 10px;
		border-right: 1px solid #EDEDED;
		.s-c-t-box
		{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 10px;
			.c-d-t
			{
				cursor: pointer;
			}
		}
		.echart-box
		{
			height: calc(100% - 45px);;
			padding-bottom: 30upx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			width: 100%;
	
			.canvasView {
				height: 600px;
				width: 400px;
			}

			.navigate {
				color: #007AFF;
			}

			.canvas-bar {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.update-btn {
				margin-right: 30upx;
			}
			
		}
		
		.mask-top
		{
			top: 225px;
			margin-left: 240px;
			width: calc(50% - 100px);
			.cate-content
			{
				height: 105px;
				.cate-list
				{
					height: 190px;
					.cate-item
					{
						padding: 5px 10px;
						cursor: pointer;
						position: relative;
						.selected-icon
						{
							position: absolute;
							color: #3388ff;
							right: 5px;
							top : 0;
							font-size: 24px;
						}
					}
					.cate-item:hover
					{
						background-color: #EEE;
					}
				}
			}
		}
	}
</style>
